 <template>
  <view class="user-list">
    <view class="list-item" :class="[item.gender=='男'?'boy-bg':'girl-bg']" v-for="(item,index) in listData" :key="index" @click="toOrderDetail(item)">
      <view class="list-img">
        <image :src="item.advertisingImg" mode="scaleToFill"></image>
      </view>
      <view class="list-txt">
        <view class="name" :class="[item.gender=='男'?'zy-dark-blue':'zy-dark-red']">{{item.name}}</view>
        <view class="time">时长剩余:0min</view>
        <view class="money">{{ item.money }}</view>
        <view class="btn">
          <view class="end-tag">结束订单</view>
          <view class="ing-tag">进行中</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  props: {
    listData: []
  },
  data() {
    return {}
  },
  methods: {
    toOrderDetail(item) {
      uni.navigateTo({
        // 参数传递
        // url:"/subShops/subOrders/orderDetail/index?data="+ encodeURIComponent(JSON.stringify(item)) //用户详情面
        url:"/subPages/subOrders/orderDetailMap/index?data="+ encodeURIComponent(JSON.stringify(item)) //互娱师详情面
        // url:"/pages/user/userBalance/index?data="+ encodeURIComponent(JSON.stringify(item)) //测试充值页面
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../lib/css/valset";
.user-list{
  padding: 10rpx;
  min-height: 100vh;

  .list-item{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background-color: #6CC7E2;
    height: 260rpx;
    display: flex;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    .list-img{
      flex: 1.5;
      height: 100%;
      border-radius: 25rpx;
      overflow: hidden;
      image{
        width: 100%;
        height: 100%;
      }
    }

    .list-txt{
      flex: 1.5;
      display: flex;
      flex-direction: column;
      //background-color: #3F536E;
      height: 100%;
      margin-left: 20rpx;
      .name{
        font-size: 40rpx;
      }

      .time{
        //margin: rpx 0rpx;
      }

      .money{

      }

      .btn{
        color: white;
        display: flex;
        //margin-top: auto;
        //margin-bottom: 10rpx;
        //margin-left: auto;
        margin: auto 10rpx 10rpx auto; //上左下右
        view{
          padding: 10rpx;
          margin-right: 10rpx;
          border-radius: 10rpx;
        }

        .end-tag{
          background-color: #737172;
        }

        .ing-tag{
          background-color: #e52958;

        }
      }

    }
  }
}

.boy-bg {
  background: linear-gradient(white,  $zy-pool-blue 150%);
}

.girl-bg {
  background: linear-gradient(white,  $zy-pool-red 150%);
}
</style>
